<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import './Widgets/widgets.css';
import { onMounted } from 'vue';
import initViewer from '@/cesium/initViewer';
//导入经纬度制作插件
import MousePosition from '@/cesium/MousePosition';
//导入指南罗盘
import CesiumNavigation from 'cesium-navigation-es6';
//导入修改地图底色
import modifyMap from '@/cesium/modifyMap';
//导入修改建筑样式
import modifyBuild from '@/cesium/modifyBuild';
//导入实例化光锥
import LightCone from '@/cesium/LightCone';
//导入区域上升飞线
import RectFlyLight from '@/cesium/RectFlyLight';
//导入轨迹线
import RoadLightLine from '@/cesium/RoadLightLine';
//导入雷达
import RadarLight from '@/cesium/RadarLight';
//导入六边形扩散
import LightSpreadLight from '@/cesium/LightSpread';

onMounted(() => {
  //挂载三维地球模型
  let viewer = initViewer();

  //根据鼠标位置生成经纬度值
  let mousePosition = new MousePosition(viewer);
  //设置导航罗盘的配置
  var options = {
    //启用罗盘
    enableCompass: true,
    //是否启用缩放
    enableZoomControls: true,
    //是否启用指南针外环
    enableCompassOuterRing: true,
    //是否启用距离的图例
    enableDistanceLegend: true,
  };
  //初始化导航罗盘
  let navigation = new CesiumNavigation(viewer, options);
  //修改地图的底色
  modifyMap(viewer);
  //修改建筑底色
  modifyBuild(viewer);
  //添加动态光锥特效
  let lightCon = new LightCone(viewer);
  //添加区域上升流光飞线
  let rectFlyLight = new RectFlyLight(viewer);
  //添加轨迹线
  let roadLightLine = new RoadLightLine(viewer);
  //添加雷达
  let radarLight = new RadarLight(viewer);
  //添加六边形
  let lightSpreadLight = new LightSpreadLight(viewer);
});
</script>

<style>
/* 初始化边距 */
* {
  margin: 0;
  padding: 0;
}
/* 初始化模型和屏幕占位 */
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>
